<template>
    <component :is="icon" :class="classes" :style="style" />
</template>

<script setup>
import { computed } from "vue";

const props = defineProps({
    icon: {
        type: Object, // 接收导入的 SVG 组件
        required: true,
    },
    size: {
        type: [String, Number],
        default: "1em",
    },
    color: {
        type: String,
        default: "currentColor",
    },
});

const classes = computed(() => ["svg-icon", props.class]);

const style = computed(() => ({
    width: typeof props.size === "number" ? `${props.size}px` : props.size,
    height: typeof props.size === "number" ? `${props.size}px` : props.size,
    color: props.color,
}));
</script>
